.

7 files changed, 220 insertions, 13 deletions

diff --git a/src/routes/[lang=lang]/+page.server.ts b/src/routes/[lang=lang]/+page.server.ts
index 6e0a910..a647cfe 100644
--- a/src/routes/[lang=lang]/+page.server.ts
+++ b/src/routes/[lang=lang]/+page.server.ts
@@ -1,8 +1,10 @@
 import { sanity } from '$lib/sanity-client';
 import type { PageServerLoad } from './$types';
 import groq from "groq";
-import type { ContactModel } from '$components/contact.svelte';
+import type { ContactModel } from './sections/contact.svelte';
 import { fromLocalizedString } from '$lib/utils';
+import type { HeroModel } from './sections/hero.svelte';
+import type { DescriptionModel } from './sections/description.svelte';
 
 export const load = (async ({ locals }) => {
     const contactSection = await sanity.fetch(groq`*[_type == "contact"][0]`);
@@ -14,6 +16,14 @@ export const load = (async ({ locals }) => {
             email: fromLocalizedString(contactSection.email, locals.locale),
             phoneHours: fromLocalizedString(contactSection.phoneHours, locals.locale),
             addressLines: contactSection.addressLines.map((el: string | object) => fromLocalizedString(el, locals.locale)),
-        } as ContactModel
+        } as ContactModel,
+        hero: {
+            title: heroSection.title,
+            content: heroSection.content
+        } as HeroModel,
+        description: {
+            title: descriptionSection.title,
+            content: descriptionSection.content
+        } as DescriptionModel
     };
 }) satisfies PageServerLoad;
\ No newline at end of file
diff --git a/src/routes/[lang=lang]/+page.svelte b/src/routes/[lang=lang]/+page.svelte
index b757a71..325f085 100644
--- a/src/routes/[lang=lang]/+page.svelte
+++ b/src/routes/[lang=lang]/+page.svelte
@@ -1,16 +1,15 @@
 <script lang="ts">
-	import Contact, { type ContactModel } from "$components/contact.svelte";
+	import Contact from "./sections/contact.svelte";
+	import Hero from "./sections/hero.svelte";
+	import Description from "./sections/description.svelte";
+	import Products from "./sections/products.svelte";
+
 	import type { PageData } from "./$types";
 
 	export let data: PageData;
-
-	type Model = {
-		contact: ContactModel;
-	};
-
-	const M: Model = {
-		contact: data.contact,
-	};
 </script>
 
-<Contact model={M.contact} />
+<Hero model={data.hero} />
+<Description model={data.description} />
+<Contact model={data.contact} />
+<Products model={data.products} />
\ No newline at end of file
diff --git a/src/routes/[lang=lang]/+page.ts b/src/routes/[lang=lang]/+page.ts
index fa3907b..1ef0b57 100644
--- a/src/routes/[lang=lang]/+page.ts
+++ b/src/routes/[lang=lang]/+page.ts
@@ -13,6 +13,6 @@ export const load = (async ({ parent, data }) => {
     const $LL = get(LL)
     return {
         title: $LL.homeTitle(),
-        contact: data.contact
+        ...data
     }
 }) satisfies PageLoad;
\ No newline at end of file
diff --git a/src/routes/[lang=lang]/sections/contact.svelte b/src/routes/[lang=lang]/sections/contact.svelte
new file mode 100644
index 0000000..b058180
--- /dev/null
+++ b/src/routes/[lang=lang]/sections/contact.svelte
@@ -0,0 +1,69 @@
+<script context="module" lang="ts">
+	export type ContactModel = {
+		addressLines: Array<string>;
+		email?: string;
+		phone?: string;
+		phoneHours?: string;
+	};
+</script>
+
+<script lang="ts">
+	import LL from "$i18n/i18n-svelte";
+
+	export let model: ContactModel;
+
+	let visible = true;
+
+	$: if (!model.addressLines) {
+		visible = false;
+	} else {
+		visible = true;
+	}
+</script>
+
+{#if visible}
+	<section class="contact relative z-1">
+		<div class="w-[calc(100%_-_2.5rem)] lg:w-[calc(100%_-_4rem)] mx-auto max-w-7xl">
+			<div class="mb-8 lg:mb-12">
+				<h1 class="text-center">{$LL.contact.title()}</h1>
+			</div>
+
+			<div class="grid grid-cols-12 gap-8 lg:gap-12">
+				<div class="col-span-12 lg:col-span-6">
+					<dl class="details-list details-list--rows">
+						{#if (model.addressLines?.length ?? 0) > 0}
+							<div class="details-list__item py-5 lg:py-8 lg:flex lg:justify-between">
+								<dt class="font-bold mb-1.5 lg:mb-2 lg:mb-0">{$LL.contact.addressTitle()}</dt>
+								<dd class="leading-snug lg:text-right">
+									{#each model.addressLines as line}
+										{line}<br />
+									{/each}
+								</dd>
+							</div>
+						{/if}
+						{#if model.email}
+							<div class="details-list__item py-5 lg:py-8 lg:flex lg:justify-between">
+								<dt class="font-bold mb-1.5 lg:mb-2 lg:mb-0">{$LL.contact.emailTitle()}</dt>
+								<dd>
+									<a href="mailto:webmaster@example.com">{model.email}</a>
+								</dd>
+							</div>
+						{/if}
+						{#if model.phone}
+							<div class="details-list__item py-5 lg:py-8 lg:flex lg:justify-between">
+								<dt class="font-bold mb-1.5 lg:mb-2 lg:mb-0">{$LL.contact.phoneTitle()}</dt>
+								<dd class="leading-snug lg:text-right">
+									<p><a href="tel:+44 7656 6455">{model.phone}</a></p>
+									{#if model.phoneHours}
+										<p class="text-contrast-medium">{model.phoneHours}</p>
+									{/if}
+								</dd>
+							</div>
+						{/if}
+					</dl>
+				</div>
+				<div class="rounded col-span-12 lg:col-span-6 lg:h-auto lg:pb-0" />
+			</div>
+		</div>
+	</section>
+{/if}
diff --git a/src/routes/[lang=lang]/sections/description.svelte b/src/routes/[lang=lang]/sections/description.svelte
new file mode 100644
index 0000000..79a3939
--- /dev/null
+++ b/src/routes/[lang=lang]/sections/description.svelte
@@ -0,0 +1,26 @@
+<script context="module" lang="ts">
+	export type DescriptionModel = {
+		title: string;
+		content?: any;
+	};
+</script>
+
+<script lang="ts">
+	import { PortableText } from "@portabletext/svelte";
+	export let model: DescriptionModel;
+
+	let visible = true;
+
+	$: if (!model.title) {
+		visible = false;
+	} else {
+		visible = true;
+	}
+</script>
+
+{#if visible}
+	<h3>{model.title}</h3>
+	{#if model.content}
+		<PortableText value={model.content} />
+	{/if}
+{/if}
diff --git a/src/routes/[lang=lang]/sections/hero.svelte b/src/routes/[lang=lang]/sections/hero.svelte
new file mode 100644
index 0000000..3cdf221
--- /dev/null
+++ b/src/routes/[lang=lang]/sections/hero.svelte
@@ -0,0 +1,75 @@
+<script context="module" lang="ts">
+	export type HeroModel = {
+		title: string;
+		content?: any;
+	};
+</script>
+
+<script lang="ts">
+	import { PortableText } from "@portabletext/svelte";
+	export let model: HeroModel;
+
+	let visible = true;
+
+	$: if (!model.title) {
+		visible = false;
+	} else {
+		visible = true;
+	}
+</script>
+
+{#if visible}
+	<section class="has-section-divider-bottom bg-contrast-low/50">
+		<div class="py-20 lg:py-32">
+			<div class="w-[calc(100%_-_2.5rem)] lg:w-[calc(100%_-_4rem)] mx-auto max-w-lg md:max-w-3xl">
+				<div class="text-component">
+					<h1>{model.title}</h1>
+					{#if model.content}
+						<PortableText value={model.content} />
+					{/if}
+				</div>
+			</div>
+		</div>
+
+		<div class="section-divider">
+			<svg viewBox="0 0 1920 60" aria-hidden="true">
+				<path
+					class="fill-floor"
+					d="M-153.5,85.5a4002.033,4002.033,0,0,1,658-71c262.854-6.5,431.675,15.372,600,27,257.356,17.779,624.828,19.31,1089-58v102Z"
+				/>
+			</svg>
+		</div>
+	</section>
+{/if}
+
+<style lang="postcss">
+	:root {
+		--section-divider-width: 1920;
+		--section-divider-height: 60;
+		--section-divider-ratio: calc(100% * var(--section-divider-height) / var(--section-divider-width));
+	}
+
+	[class*="has-section-divider"] {
+		position: relative;
+	}
+
+	.has-section-divider-bottom {
+		padding-bottom: var(--section-divider-ratio);
+	}
+
+	.section-divider {
+		position: absolute;
+		bottom: -1px;
+		left: 0;
+		width: 100%;
+		overflow: hidden;
+	}
+	.section-divider svg {
+		position: relative;
+		display: block;
+		height: auto;
+		max-width: none;
+		width: 102%;
+		left: -1%;
+	}
+</style>
diff --git a/src/routes/[lang=lang]/sections/products.svelte b/src/routes/[lang=lang]/sections/products.svelte
new file mode 100644
index 0000000..4e10b6f
--- /dev/null
+++ b/src/routes/[lang=lang]/sections/products.svelte
@@ -0,0 +1,28 @@
+<script context="module" lang="ts">
+	export type ProductsModel = {
+		products: ProductModel[];
+	};
+
+	export type ProductModel = {
+		title: string;
+		duration: string;
+		cost: string;
+		description: string;
+		orderLink: string;
+	};
+</script>
+
+<script lang="ts">
+	export let model: ProductsModel;
+
+	let visible = true;
+	$: if (!model.products || !model.products.length) {
+		visible = false;
+	} else {
+		visible = true;
+	}
+</script>
+
+{#if visible}
+    
+{/if}
\ No newline at end of file